<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="pageStyle" />
	<!-- #endif -->
	<view class="boxContent">
		<topHeader PageName="历史报告">
			<template #left>
				<view class="search" @click="goSearch">
					<uni-icons type="search" color="#fff" size="24"></uni-icons>
				</view>
			</template>
		</topHeader>
		<view class="tab-box">
			<view class="tab-top" :style="{
				paddingTop: 'calc(' + contentTop + 'px)'
			}">
				<tab :lineWidth="40" textNoAcColor="#fff" :line-height="8" :textSize="'30rpx'" :tab-type="'underLine'"
					:underLineColor="'#fff'" :textColor="'#fff'" color="#fff"
					:tabStyle="'justify-content: space-around; color'" :defaultIndex="current1" :tabList="tablistTop"
					@click="tabClick1"></tab>
			</view>
			<view class="type-wrap">
				<!-- 		<tab :lineWidth="40" :line-height="8" :textSize="'30rpx'" :tab-type="'underLine'"
					:underLineColor="'#488AFD'" :textColor="'#111111'" color="#488AFD"
					:tabStyle="'justify-content: space-around;background: #F4F8FB;'" :defaultIndex="current"
					:tabList="tablist" @click="tabClick"></tab> -->
				<view class="type" :class="{ active: current === i }" v-for=" (tab, i) in  tablist" :key="'tab' + i"
					@click="tabClick(i)">
					{{ tab }}
				</view>

			</view>
		</view>
		<view class="list-main" v-if="reportList.length && isLogin" :style="{ marginTop: height + 20 + 'px' }">
			<view style="margin-top: 30rpx">
				<view v-for="(item, idx) in reportList" :key="idx">
					<view style="text-align: center;">
						<view class="timeStyle">{{ item.createTime | filterTime }}</view>
					</view>
					<view class="list-item">
						<!-- 查询中 -->
						<view style="position: relative;" @click="detail(item)" v-if="item.queryStatus == 100"
							class="ing-task">
							<view>
								<view style=" margin-bottom: 5rpx">{{ item.taxpayerName ?
									item.taxpayerName : "-" }}</view>
								<view style="color: #999; margin-top: 5rpx">{{
									item.createTime
								}}</view>
							</view>
							<view style="color: #488afd; white-space: nowrap;"> 查询中... </view>
							<view style="position: absolute; top: 0; right: 0;" v-if="item.channel == 'scancode'">
								<image style="width: 170rpx;height: 150rpx;"
									:src="require('../../static/image/index/other-searchbg.png')" mode="scaleToFill" />
							</view>
						</view>
						<!-- 查询成功 -->
						<view v-if="item.queryStatus == 200" style="position: relative;" @click="detail(item)"
							class="success-task">
							<view class="success-task-top">
								<view class="task-msg">
									<view>公司名称：</view>
									<view>{{ item.taxpayerName }}</view>
								</view>
								<view class="task-msg">
									<view>法人姓名：</view>
									<view>{{ item.legalPerson }}</view>
								</view>
								<view class="task-msg">
									<view>注册地址：</view>
									<view>{{ item.registerAddress }}</view>
								</view>

								<view class="line"></view>
							</view>
							<view class="success-task-bottom">
								<view class="task-msg">
									<view class="task-msg-title">
										状态：{{ item.visibleType | statusFilter }}
									</view>
									<view @click.stop="personDetail(item)" class="task-msg-content"
										v-if="item.visitCount > 0">
										<text>{{ item.visitCount }}</text>
										<text> 人查看</text>
									</view>
								</view>
								<view class="task-msg-status">已完成</view>
							</view>
							<view style="position: absolute; top: 0; right: 0;" v-if="item.channel === 'scancode'">
								<image style="width: 170rpx;height: 150rpx;"
									:src="require('../../static/image/index/other-searchbg.png')" mode="scaleToFill" />
							</view>
						</view>
						<!-- 查询失败 -->
						<view v-if="item.queryStatus == 300" style="position: relative;">
							<view class="ing-fail">
								<view>
									<view style="
                      font-weight: 500;
                      color: #222222;
                      margin-bottom: 5rpx;
                    ">{{ item.taxpayerName }}</view>
									<view class="row" style="margin-top: 10rpx; width: 370rpx">
										<text style="color: #f0822f; font-size: 30rpx">未知状态</text>
										<view>
											<text style="color: #999999; font-size: 24rpx">具体原因请</text>
											<text @click="failPop(item)"
												style="color: #488afd; font-size: 24rpx">联系客服</text>
										</view>
									</view>
								</view>
								<view style="display: flex; align-items: center">
									<button class="resetSearch" @click="addSearch(item)" v-if="item.channel != 'scancode'">
										重新查询
									</button>
								</view>
							</view>
							<div class="line"></div>
							<view class="tipStyle">温馨提示：我们会持续请求数据，请30分钟后再查看</view>
							<view style="position: absolute; top: 0; right: 0;" v-if="item.channel == 'scancode'">
								<image style="width: 170rpx;height: 150rpx;"
									:src="require('../../static/image/index/other-searchbg.png')" mode="scaleToFill" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="reportList.length == 0 && !loading" :style="{ marginTop: height + 20 + 'px' }">
			<empty style="padding-top: 160rpx;"></empty>
		</view>
		<!-- <loading :show="loading"></loading> -->

		<authorize @onLoadFun="onLoadFun" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<Activity :type="activityType" v-model="showActivity" :money="activityMoney" />
	</view>
</template>
<script>
import {
	getReportListApi
} from "@/api/user";
import Routine from "@/libs/routine";
import {
	mapGetters
} from "vuex";
import share from "@/utils/share";
import Authorize from "@/components/Authorize.vue";
import topHeader from '@/components/topHeader.vue'
import residenceTime from "@/mixins/residenceTime";
import ActivityMixin from '@/mixins/activity.js'
import Activity from '@/pages/components/activity.vue'
import LockScrollMixin from '@/mixins/lockScroll.js'

export default {
	components: {
		Authorize,
		topHeader,
		Activity
	},
	mixins: [residenceTime, ActivityMixin, LockScrollMixin],
	computed: mapGetters(["isLogin"]),
	data() {
		return {
			tablist: ["全部", "查询中", "已完成", "查询失败"],
			tablistTop: ["全部报告", "我的历史", "他人查询"],
			taskInfo: {},
			taskList: [],
			current: 0,
			current1: 0,

			tabFlag: false,
			loading: false,
			isShowAuth: false,
			list: [],
			numArr: {
				0: "",
				1: 100,
				2: 200,
				3: 300,
			},
			where: {
				pageNum: 1,
				pageSize: 10,
				likeName: "",
				queryStatus: "",
				queryType: 0,
			},
			total: 0,
			reportList: [],
			errInfo: {
				title: ''
			},
			height: 0,
			contentTop: 44,
			isSearch: false

		};
	},
	filters: {
		filterTime(val) {
			const [dateStr, timeStr] = val.split(" ");
			if (!dateStr || !timeStr) return val; // 格式校验

			const [y, m, d] = dateStr.split("-");
			const currentYear = new Date().getFullYear();
			const timePart = timeStr.slice(0, 5); // 始终取 HH:mm
			return currentYear == y ?
				`${parseInt(m)}月${parseInt(d)}日 ${timePart}` :
				`${y}年${parseInt(m)}月${parseInt(d)}日 ${timePart}`;
		},
		statusFilter(type) {
			const statusMap = {
				0: "全公开",
				1: "部分公开",
				2: "私密",
				3: "指定访问"
			};
			return statusMap[type];
		}
	},
	async onPullDownRefresh() {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 0,
		});
		this.resetPageInfo()
		uni.stopPullDownRefresh();
	},
	async onShow() {
		// this.current = 0;
		if (!this.isSearch) {
			if (this.isLogin) {
				this.where.pageNum = 1
				this.taskList = [];
				this.reportList = []
				await this.getList();
				// this.initLeftMenu();
			} else {
				// #ifdef MP ||  H5 ||  APP-PLUS
				this.isShowAuth = !this.isLogin;
				// #endif
			}
			this.$nextTick(() => {
				this.getContainerHeight();
			});
		} else {
			this.isSearch = false
		}
	},
	created() {
		this.$nextTick(() => {
			// #ifdef MP-WEIXIN
			this.getHeight();
			// #endif
		})
	},
	onReachBottom() {
		if (this.where.pageNum * this.where.pageSize < this.total) {
			this.where.pageNum++
			this.getList()
		} else {
			this.$util.Tips('没有更多数据了')
		}
	},
	onLoad(options) {
		// #ifdef H5
		share.getShareConfig({}, this.$WXMENU);
		// #endif
		global.spid = 0;
		if (options.spreadUid) {
			global.spid = options.spreadUid;
		}
		if (this.isLogin) {
			// this.getList();

		}
		uni.$on('ReportSearch', value => {
			this.handleSearch(value)
		})
	},
	onUnload() {
		uni.$off('ReportSearch')
	},
	methods: {
		goSearch() {
			this.isSearch = true
			uni.navigateTo({
				url: '/pages/reportList/search'
			})
		},
		getHeight() {
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const {
				top,
				height
			} = menuButtonInfo
			this.contentTop = top + height
		},
		resetPageInfo() {
			this.where.pageNum = 1
			this.taskList = [];
			this.reportList = []
			this.getList();
		},
		getContainerHeight() {
			let that = this;
			let info = uni.createSelectorQuery().select('.tab-box');

			info.boundingClientRect(function (data) {
				console.log(data);
				// #ifdef MP-WEIXIN
				that.height = data.height
				// #endif
				// #ifdef H5
				that.height = data.height
				// #endif
			}).exec();
		},
		personDetail(v) {
			console.log(v);
			uni.navigateTo({
				url: '/pagesWater/reportPersonList/index?shareCode=' + v.shareCode
			});
		},
		pageViewTrack(stayTime) {
			const route = this.$util.getCurrentRoute()
			let params = {
				Um_Key_SourcePage: route.path,
				Um_Key_Duration: stayTime,
			}
			this.$umaTrack.pageViewTrack(params)
		},
		addSearch(item) {
			let params = {
				Um_Key_ButtonName: '重新查询',
				Um_Key_SourcePage: '报告列表',
			}
			this.$umaTrack.pageClickTrack(params)
			uni.navigateTo({
				url: `/pagesWater/taxSearch/index?taxpayerName=${item.taxpayerName}`,
			});
		},
		failPop(v) {
			this.errInfo.title = `${v.taxpayerName}的状态是 ${v.queryStatus == 200 ? '成功' : '未知状态'}`
			this.goto()
		},
		tabClick1(v) {
			this.current1 = v;
			this.reportList = []
			this.where = {
				pageNum: 1,
				pageSize: 10,
				likeName: "",
				queryStatus: this.numArr[this.current],
				queryType: v,
			};
			this.getList();


			let params = {
				Um_Key_ButtonName: this.tablistTop[v],
				Um_Key_SourcePage: '报告列表',
			}
			this.$umaTrack.pageClickTrack(params)


		},
		tabClick(v) {
			if (!this.isLogin) return this.isShowAuth = true
			this.current = v;
			this.reportList = [];
			this.where = {
				pageNum: 1,
				pageSize: 10,
				likeName: "",
				queryStatus: this.numArr[v] ? this.numArr[v] : "",
				queryType: this.current1,
			};
			this.getList();
			let params = {
				Um_Key_ButtonName: this.tablist[v],
				Um_Key_SourcePage: '报告列表',
			}
			this.$umaTrack.pageClickTrack(params)
		},
		handleSearch(likeName = '') {
			this.reportList = [];
			this.where = {
				pageNum: 1,
				pageSize: 10,
				likeName,
				queryStatus: this.numArr[this.current],
				queryType: this.current1,
			};
			this.getList();
		},
		onLoadFun(e) {
			this.isShowAuth = false;
			this.doActivity()
			this.reportList = [];
			this.getList();
		},
		goto() {
			// #ifdef MP-WEIXIN
			wx.openCustomerServiceChat({
				extInfo: {
					url: 'https://work.weixin.qq.com/kfid/kfc389dffe7ae981936'
				},
				corpId: 'ww1c4069be6ea4025e',
				showMessageCard: true,
				sendMessageTitle: this.errInfo.title,
				success(res) {
					console.log(res);
				},
				fail(err) {
					console.log(err);
				},
			})
			// #endif

			// #ifdef H5
			location.href = "https://work.weixin.qq.com/kfid/kfc389dffe7ae981936";
			// #endif

		},
		closeDialog() {
			this.$refs.popup.close();
		},
		authColse() {
			this.isShowAuth = false;
		},
		getList() {
			this.loading = true;
			getReportListApi(this.where).then((res) => {
				this.total = res.data.total;
				this.reportList = [...this.reportList, ...res.data.list];
			}).finally(() => {
				this.loading = false;
			});
		},
		detail(item) {
			if (item.queryStatus == 200) {
				let params = {
					Um_Key_ButtonName: `查看报告详情-${item.shareCode}`,
					Um_Key_SourcePage: '报告列表',
				}
				this.$umaTrack.pageClickTrack(params)
				uni.navigateTo({
					url: `/pagesWater/taxSearch/companyDetail?shareCode=${item.shareCode}`,
				});
			}
		},
	},

	onHide() {
		if (this.isShowAuth) this.authColse()
	}
};
</script>
<style lang="scss">
/deep/ .tab-top .rowtab {
	background-color: #488AFD !important;
}



page {
	background-color: #F4F8FB;
}

.type-wrap {
	padding-top: 20rpx;
	display: flex;
	padding-left: 20rpx;
	background: #F4F8FB;

	.type {
		height: 58rpx;
		line-height: 58rpx;
		color: #999;
		font-size: 26rpx;
		border-radius: 6rpx;
		padding: 0 30rpx;
		background-color: #fff;
		margin-right: 20rpx;

		&.active {
			color: #488AFD;
			font-weight: bold;
		}
	}
}

.empty-container {
	padding-top: 100rpx !important;
}

.tab-box {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 100;
}

.tab-top {
	width: 100%;
	background: #488AFD;
	padding-left: 30rpx;
	padding-right: 30rpx;
	padding-bottom: 20rpx;
	padding-top: 200rpx;
}

.timeStyle {
	text-align: center;
	display: inline-block;
	font-size: 30rpx;
	line-height: 42rpx;
	color: #333;
}

.line {
	margin: 20rpx 0;
	margin-left: -20rpx;
	margin-right: -20rpx;
	background: #F5F5F5;
	height: 2rpx;
}

.list-main {
	width: 100%;

	.list-item {
		margin: 10rpx 20rpx 30rpx;
		background-color: #fff;
		padding: 0 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #666;

		.ing-task {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
		}

		.success-task {
			.success-task-top {
				.task-msg {
					display: flex;
					width: 100%;
					padding-top: 25rpx;

					>view {

						&:nth-child(1) {
							white-space: nowrap;
						}

						&:nth-child(2) {
							width: 0;
							flex: 1;
						}
					}
				}


			}

			.success-task-bottom {
				padding: 0 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.task-msg {
					display: flex;
					align-items: center;

					.task-msg-title {
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
						margin-right: 20rpx;
					}

					.task-msg-content {
						>text {
							&:nth-child(1) {
								font-weight: 600;
								font-size: 26rpx;
								color: #548AEE;
							}

							&:nth-child(2) {
								font-weight: 400;
								font-size: 26rpx;
								color: #999999;
							}
						}
					}
				}


				.task-msg-status {
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
				}

			}
		}

		.ing-fail {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 20rpx;
		}

		.tipStyle {
			color: #999999;
			font-size: 24rpx;
			padding: 0 0 20rpx;
		}
	}
}

.popup-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	//padding: 15px;
	width: 590rpx;
	height: 700rpx;
	background-color: #fff;
	text-align: center;
	margin: 0 auto;
	position: relative;
	z-index: 999;
	border-radius: 20rpx;

	.popIKnow {
		width: 220rpx;
		height: 64rpx;
		border-radius: 40rpx;
		line-height: 64rpx;
		text-align: center;
		margin: 40rpx auto 0;
		color: #ffffff;
		background-color: #488afd;
	}
}

.resetSearch {
	width: 160rpx;
	height: 50rpx;
	line-height: 50rpx;
	background-color: #488afd;
	color: #fff;
	font-size: 24rpx;
	border-radius: 40rpx;
}
</style>